<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../../../../../../static/mobile/default/css/layout.css?v=2"/>
    <link rel="icon" type="image/png" href="../../../../../../static/favicon.ico"/>
    <script src="../../../../static/mobile/default/js/mui.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        <script src="../../../../../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../../../../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../../../../../static/mobile/default/js/page.js?v=1"></script>
    <title>合同详情  - 达漂亮</title>
          
<link rel="stylesheet" href="../../../../../../static/mobile/default/css/orderDetails.css" />
<link rel="stylesheet" href="../../../../../../static/mobile/default/css/mui.min.css" />


</head>
<body >
  <div class="page orderDetails">
    		<div class="page-hd">
            <div class="header base-header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">合同详情</div>
                <div class="header-right">
                    <!-- <a href=""></a> -->
                </div>
            </div>
        </div>
      
<div class="page-bd">
    <!-- 页面内容-->
    
   <script type="text/html" id="orderDetailTpl">
    <div class="orderBox">
        <div class="code fs28"><p class="color_3"  data-id="{{id}}">合同名称:{{contractName}}</p>
                {{if status == 1}}
                <span class="color_9 ostatus">待甲方签</span>
                {{/if}}
                 {{if status == 2}}
                <span class="color_9 ostatus">待乙方签</span>
                {{/if}}
                 {{if status == 3}}
                <span class="color_9 ostatus">已完成</span>
                {{/if}}
                 {{if status == 4}}
                <span class="color_9 ostatus">已过期</span>
                {{/if}}
        </div>
        <div class="goodslist">
            <a  class="goods">
                <div class="goodsinfo">
                    <div style="    display: flex;    align-items: center;">
                      <p class="fs28 color_3">发起人签：</p>
                      {{if sendSign}}
                      <img src="{{sendSign}}" style="    width: 2rem;"/>
                      {{/if}}
                     </div>
                    <p class="fs28 color_3">签订时间：{{sendTime}}</p>
                    <div style="    display: flex;    align-items: center;">
                      <p class="fs28 color_3">接收人签：</p>
                      {{if recvSign}}
                      <img src="{{recvSign}}" style="    width: 2rem;"/>
                      {{/if}}
                     </div>
                    <p class="fs28 color_3">签订时间：{{recvTime}}</p>
                    <p class="fs28 color_3">签署有效期：{{endTime}}</p>
                  

                </div>

           </a>
              <a  href="https://mp.jianguoes.com//build/build/generic/web/viewer.html?file={{tplUrl}}">点击查看合同内容</a>
    </div>
    
    {{if enableSign == 1}}
     <div style='text-align:center;'>
        <p>请在下方签名</p>
         <div id="signature" style="height: 180px;"></div>
    </div>
    <div style="text-align: center;padding-bottom: .2rem;">
            <input id="clear" type="button" value="清除">
            <input id="export" type="button" value="确认签名" data-id="{{id}}">
        
    </div>

        <div id="pic" style='display:none'/>
            <p id="base" style="width:100%;"></p>
        </div>
    {{/if}}
    </script>
    
   
</div>

  </div>

<script src="../../../../static/js/art-template.js"></script>
<script src="../../../../static/mobile/default/js/lib/fastclick.js"></script>
<script src="../../../../static/js/jquery/lazyload/jquery.lazyload.js"></script>

<script src="../../../../static/mobile/default/js/jSignature.min.js"></script>


<script type="text/javascript">
	       
			
		
var contractId = Number(getUrlParam('contractId'))
var contracStatus = ''

      share()
     function  share(){
    /***用户点击分享到微信圈后加载接口接口*******/
        var url=window.location.href;
        console.log("url:"+url);
            $.ajax({
		    url: "/api/mp/wxconfig",
		    type: "post",
		    data:{shareUrl:url},
		    headers:{ token: $.cookie('code')},
		    dataType: "json",
		    success: function(data){
		         configData = {
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.data.appid, // 必填，公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                    signature: data.data.signature,// 必填，签名，见附录1
                    jsApiList : ['hideOptionMenu']
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
               };
               
               //step2:注入配置信息
               wx.config(configData);
               //step3:通过ready接口处理成功验证
               wx.ready(function () {
                   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//                 alert("执行ready方法");
//                 wx.checkJsApi({
//                      jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                      success: function(res) {
//                      // 以键值对的形式返回，可用的api值true，不可用为false
//                      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                      }
//                 });
                   //接口1:获取网络类型
                    wx.getNetworkType({
                        success: function (res) {
                          oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
//                        alert("网络类型"+ oldNet);
                        }
                     });
                   //禁用右上角菜单按钮
                   wx.hideOptionMenu();
		    })
		    },
		    error: function() {
// 			    _alert('ajax request failed!!!!');
			    return;
		    } 
        })

	    
	    
	    }
$(function(){
    
    
     getOrderDetail(contractId)
    //根据订单id获取订单详情
    	function getOrderDetail(contractId){
        jq_ajax('https://mp.jianguoes.com/api/mp/detailContract',{contractId:contractId},function(res){
            if(res.errno  != 0 ){
                _alert(res.errmsg);
                return false;
            }
            $('.page-bd').append(template('orderDetailTpl',res.data))
           contracStatus = res.data.status
             mui.plusReady(function() {
				plus.screen.lockOrientation('landscape-secondary');
			});
			$(document).ready(function() {
				$("#signature").jSignature({
					'height': '180px',
					'width': '100%',
				})
			});
			$('#clear').click(function(){
			    $("#signature").jSignature("reset");

			})
			$('#save').click(function(){
			    var datapair = $("#signature").jSignature("getData", "image");
				var array = datapair.splice(",");
				mui.toast(array[1]);
			})
				$('#export').click(function(){
				    $('#pic').html('')
			    var datapair = $("#signature").jSignature("getData", "image");
				var src = "data:" + datapair[0] + "," + datapair[1];
				saveSign(src)
			})
            
        },'get')	
	}
	
    //保存签名
    function saveSign(src){
        
        	$.ajax({
		  url: '/api/mp/signContract',
		  type: 'post',
		  headers:{'token': $.cookie('code')},
		  data: {contractId:contractId,sign:src,status:contracStatus},
		  success: function(res){
            if(res.errno  != 0 ){
                _alert(res.errmsg);
                return false;
            }
             _alert('提交签名成功');
             setTimeout(function() {
                 window.location.reload()
             }, 2000);
        }	
        	})
	}
       

    //订单操作
    $('.button').on('click','span',function(res){
        var _this = $(this);
        var arr = new Object();
        arr.order_id = '565';
        arr.type = _this.data('type');
		if (arr.type == 'cancel'){
			_alert('确定取消此订单？',function(){action(arr)});
			return false;
		}else if(arr.type == 'refund'){
            _alert('确定申请取消订单？',function(){
                arr.type = 'cancel';
                action(arr)
            });
            return false;
        }
		return action(arr);
    })
	function action(arr){
        jq_ajax('/shop/api.order/action.html',arr,function(res){
            if(res.code  == 0 ){
                _alert(res.errmsg);
                return false;
            }
            window.location.reload();
        })	
	}
	$('.confirmReceipt').click(function(){
	    jq_ajax('https://mp.jianguoes.com/api/mp/confirmOrder',{orderId:order_id},function(res){
            if(res.errno  != 0 ){
                _alert(res.errmsg);
                return false;
            }
            $('.page-bd').append(template('orderDetailTpl',res.data))
            
        },'get')
	})
})
</script>

  <div class="alertBox">
      <div class="alertBG"></div>
      <div class="alert">
          <div class="text fs30 color_3 bor_b">

          </div>
          <!-- 单按钮 -->
          <div class="button fs32 fw_b color_r">
              知道了
          </div>
          <!-- 双按钮 -->
          <div class="buttonBox fs32 fw_b">
              <span class="color_9 bor_r cancel">取消</span>
              <span class="color_r confirm">确定</span>
          </div>
      </div>
  </div>
  <script type="text/javascript">
      var is_xcx = 0;
      $(document).on('click', 'a', function () {
          var href = $(this).attr('href');
          if (href.indexOf('/pages') != -1) {
              if (is_xcx == 1) {
                  wx.miniProgram.navigateTo({
                      url: href
                  })
                  return false;
              } else {
                  return false;
              }
          }
      })

</script>
         <link rel="stylesheet" href="../../../../static/mobile/default/css/payment.css" />
        <link rel="stylesheet" href="../../../../static/mobile/default/css/userData.css" />
        <script type="text/javascript">
        
        

        
        $('.closeBox').on('click', function () {
                $('.model').hide();
            });
            
             //下单


        </script>
    </body>
</html>